import {
  forwardRef,
  Component,
  Input,
  ViewEncapsulation,
  ChangeDetectionStrategy,
  ChangeDetectorRef, Renderer2, ElementRef, Host, Optional,
} from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ApesNoAnimationDirective } from '@shared/apes/core';
import { ApesI18nService, DateHelperService } from '@shared/apes/i18n';
import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.component';

@Component({
  selector: 'apes-month-picker',
  templateUrl: './header-picker.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => ApesMonthPickerComponent)
  }],
  host               : {
    '[class.apes-checkbox-group]': 'true',
    '[class.apes-calendar-picker]': 'true'
  }
})

export class ApesMonthPickerComponent extends HeaderPickerComponent {

  @Input() apesFormat: string = 'yyyy-MM';

  endPanelMode: SupportHeaderPanel = 'month';

  constructor(
    i18n: ApesI18nService,
    cdr: ChangeDetectorRef,
    dateHelper: DateHelperService,
    renderer: Renderer2,
    elementRef: ElementRef,
    @Host() @Optional() public noAnimation?: ApesNoAnimationDirective
  ) {
    super(i18n, cdr, dateHelper, noAnimation);
    renderer.addClass(elementRef.nativeElement, 'apes-calendar-picker');
  }
}
